import React from "react";
import { AddressState } from "../../store/user/userReducer";
import "./style.scss";
interface PropsType extends AddressState {
  footer?: JSX.Element | React.ReactNode;
  isDefault?: boolean;
  onClick?: () => void;
  prefixLeft?: JSX.Element | React.ReactNode;
}

export const Address: React.FC<PropsType> = ({
  id,
  nickname,
  tel,
  address,
  footer,
  isDefault,
  onClick,
  prefixLeft,
}) => {
  return (
    <div className="address" onClick={onClick}>
      {prefixLeft && <div className="address-left">{prefixLeft}</div>}

      <div className="address-content">
        <h4>
          <span>
            {nickname}
            <span style={{ color: "red" }}>
              {isDefault ? "-默认地址" : ""}
            </span>{" "}
          </span>
          <span>{tel}</span>
        </h4>
        <p>{address}</p>
        {footer}
      </div>
    </div>
  );
};
